<template>
    <!-- 基本信息 -->
    <div>
      <div class="title-wrapper">
        <title-name title="风险复核信息"></title-name>
        <a-icon
          v-if="showPlanBoardVisible"
          :type="planBoardVisible ? 'up' : 'down'"
          @click="planBoardVisible = !planBoardVisible"
        />
      </div>
      <div v-if="planBoardVisible">
        <!-- 表单信息 -->
        <custom-form ref="ruleForm" isValidate :formList="formList" :form="form" :editModel="onlyRead ? 'V' : 'E'"
          :isEmit="false">
            <!-- 复核风险损失 -->
            <template slot="lossInfos" slot-scope="scoped">
              <a-table
                :pagination="false"
                size="default"
                :rowKey="(record, index) => record ? (record.id + index) : index"
                bordered
                :columns="columns1"
                :data-source="dataSource1"
              >
              </a-table>
            </template>
            <!-- 复核情况 -->
            <template slot="reviewUsers" slot-scope="scoped">
              <a-table
                :pagination="false"
                size="default"
                :rowKey="(record, index) => record ? (record.id + index) : index"
                bordered
                :columns="columns2"
                :data-source="dataSource2"
              >
                <!-- 操作 -->
                <template
                  slot="action"
                  slot-scope="text, record, index"
                >
                  <a class="base-btn" @click="openReview(record)">查看</a>
                </template>
              </a-table>
            </template>
        </custom-form>
      </div>
      <a-modal
        centered
        title="查看复核情况"
        width="1200px"
        :visible="reviewModal.show"
        @cancel="reviewModal.show = false"
        :footer="null"
      >
        <custom-form ref="ruleForm" isValidate :formList="formListModal" :form="reviewModal.form" :editModel="'V'"
          :isEmit="false">
            <!-- 复核风险损失 -->
            <template slot="lossInfos" slot-scope="scoped">
              <a-table
                :pagination="false"
                size="default"
                :rowKey="(record, index) => record ? (record.id + index) : index"
                bordered
                :columns="columns3"
                :data-source="reviewModal.source"
              >
              </a-table>
            </template>
          </custom-form>
      </a-modal>
    </div>
  </template>
  
  <script>
  const columns1 = [
    {
      title: '损失类型',
      dataIndex: 'treeName',
      width: 180,
    },
    {
      title: '损失描述',
      dataIndex: 'description',
      ellipsis: true,
    },
  ]
  const columns2 = [
    {
      title: '复核人',
      dataIndex: 'reviewEmployeeName',
    },
    {
      title: '复核时间',
      dataIndex: 'reviewDate',
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' },
    },
  ]
  const columns3 = [
    {
      title: '损失类型',
      dataIndex: 'treeName',
      width: 180,
    },
    {
      title: '损失描述',
      dataIndex: 'description',
      ellipsis: true,
    },
    {
      title: '补充描述',
      dataIndex: 'supplementDescription',
    },
  ]
  export default {
    name: 'a' + Date.now(),
    components: {
    },
    props: {
      // 表单
      form: {
        type: Object,
        default: () => ({})
      },
      // 只读模式
      onlyRead: {
        type: Boolean,
        default: () => false
      },
      // 是否显示箭头
      showPlanBoardVisible: {
        type: Boolean,
        default: () => false
      },
      // 默认展开
      defaultPlanBoardVisible: {
        type: Boolean,
        default: () => true
      }
    },
    watch: {
        defaultPlanBoardVisible: {
          handler(val) {
            this.planBoardVisible = val
          },
          immediate: true,
          deep: true
        },
        'form.reviewUsers': {
          handler(newVal) {
            this.dataSource2 = newVal || []
          },
          immediate: true,
          deep: true
        },
        'form.last': {
          handler(newVal) {
            if (newVal) {
                if (newVal.lossInfos) {
                    this.dataSource1 = newVal.lossInfos.map(item => {
                        if (item.type) {
                        item.level = item.level || item.type.level
                        item.description = item.description || item.type.description
                        item.treeName = item.treeName || item.type.treeName
                        }
                        return item
                    })
                    this.form.levelReviewlName = newVal.level?.name
                } else {
                  this.dataSource1 = []
                }
            } else {
              this.dataSource1 = []
            }
          },
          immediate: true,
          deep: true
        },
    },
    data() {
      return {
        planBoardVisible: false,
        reviewModal: {
          show: false,
          form: {},
          source: []
        },
        dataSource1: [],
        dataSource2: [],
        outSelectedRowKeys: [],
        columns1,
        columns2,
        columns3,
      }
    },
    created() {
    },
    computed: {
      // 表单配置项
      formList() {
        let list = []
        if (this.form.levelReviewlName) {
          list.push({
            type: 'a-input',
            keyName: 'levelReviewlName',
            label: '复核风险等级',
            disabled: true,
            span: 24
          })
        }
        if (this.dataSource1 && this.dataSource1.length > 0) {
          list.push({
            slot: true,
            type: 'a-input',
            keyName: 'lossInfos',
            label: '风险损失',
            span: 24
          })
        }
        list.push({
          slot: true,
            type: 'a-input',
            keyName: 'reviewUsers',
            label: '复核情况',
            span: 24
        })
        return list
      },
      formListModal() {
        let list = []
        if (this.reviewModal.source && this.reviewModal.source.length > 0) {
          list.push({
            slot: true,
            type: 'a-input',
            keyName: 'lossInfos',
            label: '风险损失',
            span: 24
          })
        }
        list.push({
          type: 'a-input',
          keyName: 'levelReviewlName',
          label: '复核风险等级',
          span: 24
        })
        list.push({
          type: 'BaseTextarea',
          keyName: 'proposal',
          label: '补充处理意见',
          attrs: {
            maxLength: 1000
          },
          rule: {
            required: true,
            whitespace: true,
            message: '请输入补充处理意见',
            trigger: 'change'
          },
          span: 24
        })
        return list
      }
    },
    methods: {
      openReview(record) {
        this.reviewModal.show = true
        this.reviewModal.form = {proposal: record.proposal, levelReviewlName: record?.level?.name}
        this.reviewModal.source = record.lossInfos && record.lossInfos.map(item => {
            if (item.type) {
              item.level = item.level || item.type.level
              item.description = item.description || item.type.description
              item.treeName = item.treeName || item.type.treeName
            }
            return item
        })
      }
    },
  }
  </script>

<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 18px;
  }
}
</style>